<template>
  <ych-modal
    :fullscreen="fullscreen"
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="spinning > 0"
    @cancel="handleCancel">
    <a-row >
      <a-col :span="leftSpan">
        <a-tree
          v-if="treeData.length>0"
          :selectedKeys="selectedKeys"
          :defaultExpandAll="true"
          :showLine="true"
          :tree-data="treeData"
          @select="onSelect"
        >
        </a-tree>
      </a-col>
      <a-col :span="rightSpan">
        <a-tabs size="small">
          <a-tabPane :tab="$t('m.bpm.common.flow_history')" key="step">
            <bpm-pic ref="designer" :process-instance-id="processInstanceId"
                     :process-def-id="processDefId" :refreshFlg="refreshFlg"></bpm-pic>
            <bpm-step ref="bpmStep" :process-instance-id="processInstanceId" :refreshFlg="refreshFlg"></bpm-step>
          </a-tabPane>
          <a-tabPane :tab="$t('m.bpm.common.operate_log')" key="operate">
            <bpm-idea-time ref="bpmIdeaTime" :process-instance-id="processInstanceId" :refreshFlg="refreshFlg"></bpm-idea-time>
          </a-tabPane>
          <a-tabPane :tab="$t('m.bpm.common.approval_opinion')" key="idea">
            <bpm-idea ref="bpmIdea" :process-instance-id="processInstanceId" :showTitle="true" :refreshFlg="refreshFlg"></bpm-idea>
            <br/>
            <bpm-idea-pass-round ref="bpmIdeaPassRound"
                                 :process-instance-id="processInstanceId" :refreshFlg="refreshFlg"></bpm-idea-pass-round>
          </a-tabPane>
          <a-tabPane :tab="$t('m.bpm.common.business_handler')" key="task">
            <bpm-task ref="bpmTask" :showButton="false" :process-instance-id="processInstanceId" :refreshFlg="refreshFlg"></bpm-task>
          </a-tabPane>
        </a-tabs>
      </a-col>
    </a-row>
    <template slot="footer">
      <a-button key="close" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

  import BpmPic from "./bpmTrack/BpmPic";
  import BpmStep from "./bpmTrack/BpmStep";
  import BpmIdea from "./bpmTrack/BpmIdea";
  import BpmIdeaPassRound from "./bpmTrack/BpmIdeaPassRound";
  import BpmIdeaTime from "./bpmTrack/BpmIdeaTime";
  import BpmTask from './bpmTrack/BpmTask'
  import { getAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "BpmPicModal",
    components: {
      BpmPic,
      BpmStep,
      BpmIdea,
      BpmIdeaPassRound,
      BpmIdeaTime,
      BpmTask
    },
    props: {
    },
    data() {
      return {
        visible: false,
        processInstanceId:"",
        processDefId:"",
        title:this.$t('m.bpm.other.bpmTrack'),
        url:{
          getParentAndSubProcessInstTree: YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getParentAndSubProcessInstTree/v1',
        },
        spinning: 0,//遮罩
        treeData: [],
        selectedKeys:[],
        fullscreen:false,
        leftSpan:0,
        rightSpan:24,
        refreshFlg:1,
      }
    },
    created() {

    },
    methods: {
      handleCancel() {
        this.visible = false;
      },
      onSelect(selectedKeys, e) {
        if (selectedKeys.length == 0) {
          return
        }
        this.processInstanceId = e.node.dataRef.key
        this.selectedKeys = selectedKeys
        this.processDefId = e.node.dataRef.processDefId
        this.refreshFlg ++
      },
      open(processInstanceId,processDefId){
        this.processInstanceId = processInstanceId
        this.processDefId = processDefId
        this.selectedKeys = [processInstanceId]
        this.visible = true
        if(!this.processInstanceId){
          return;
        }
        this.spinning++
        getAction(this.url.getParentAndSubProcessInstTree, { processInstanceId: processInstanceId }).then((res) => {
          if (res.success) {
            if(res.result.length>0){
              this.fullscreen = true
              this.leftSpan = 4
              this.rightSpan = 20
            }else{
              this.fullscreen = false
              this.leftSpan = 0
              this.rightSpan = 24
            }
            this.treeData = res.result
          } else {
            this.fullscreen = false
            this.leftSpan = 0
            this.rightSpan = 24
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal-body {
    padding: 5px 24px 5px 24px !important;
  }
</style>
